<template>
  <a-dropdown v-if="currentUser && currentUser.name" placement="bottomRight">
    <template #overlay>
      <a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
        <a-menu-item  v-if="menu" key="center" @click="handleToCenter">
          <template #icon>
            <SettingOutlined />
          </template>
          <span> {{ $t('menu.account.center') }}</span>
        </a-menu-item>
        <a-menu-item v-if="menu" key="settings" @click="handleToSettings">
          <template #icon>
            <SettingOutlined />
          </template>
          <span>{{ $t('menu.account.settings') }}</span>
        </a-menu-item>
        <a-menu-divider v-if="menu" />
        <a-menu-item key="logout" @click="handleLogout">
          <template #icon>
            <LogoutOutlined />
          </template>
          <span>{{ $t('menu.account.logout') }}</span>
        </a-menu-item>
      </a-menu>
    </template>
    <span class="ant-pro-account-avatar">
       <a-avatar shape="square"
                 size="small"
                 src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                 class="antd-pro-global-header-index-avatar" >
    </a-avatar>
      <span>{{ currentUser.name }}</span>
    </span>
  </a-dropdown>
  <span v-else>
    <a-spin size="small" :style="{ marginLeft: 8, marginRight: 8 }" />
  </span>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Modal } from 'ant-design-vue'
import { useI18n } from 'vue-i18n';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'AvatarDropDown',
  props: {
    currentUser: {
      type: Object,
      '{[p: string]: any}' : () => null
    },
    menu: {
      type: Boolean,
      default: true
    }
  },
  setup(){
    const router = useRouter();
    const { t } = useI18n()
    const store = useStore()

    const handleToCenter = () => {
      // console.log('handleToCenter')
      router.push({ path: '/account/center' })
    }
    const handleToSettings = () => {
      router.push({ path: '/account/settings' })
    }

    const handleLogout = () =>{
      Modal.confirm({
        title: t('layouts.usermenu.dialog.title'),
        content: t('layouts.usermenu.dialog.content'),
        onOk: () => {
          // return new Promise((resolve, reject) => {
          //   setTimeout(Math.random() > 0.5 ? resolve : reject, 1500)
          // }).catch(() => console.log('Oops errors!'))
          return store.dispatch('Logout').then(() => {
            router.push({name: 'login'})
          })
        }
      })
    }
    return {
      handleToCenter,
      handleToSettings,
      handleLogout
    }
  }
})
</script>

<style lang="less" scoped>

</style>
